<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        body{
            background: rgb(246,246,246);
            margin: 0px;
            padding: 0px;
        }
        .div_1{
            width: 1000px;
            height: 240px;
            /*background:url("../img/背景2.jpg")no-repeat center;*/
            background: url("http://i0.hdslb.com/bfs/space/44873d3568bdcb3d850d234e02a19602972450f1.png@2200w_400h_1o.webp") no-repeat;
        }

        .div_2{
            width: 1000px;
            height: 120px;
            background: white;
        }
        /*.con_img{*/
        /*    position: relative;*/
        /*    width: 240px;*/
        /*    height: 240px;*/
        /*}*/
        .ms{
            position: absolute;
            bottom: 20px;
            left: 20px;
            width: 168px;
            height:168px;
            background:url("../img/默认头像.png");
            border: white solid 4px;
            border-radius: 10px;
        }
        .username{
            position: absolute;
            bottom: 100px;
            left: 200px;
            width: 100px;
            height:20px;
            font-size: 26px;
            font-weight: 600;
            font-synthesis: style;
            white-space: nowrap;
        }
        .motto{
            position: absolute;
            bottom: 89px;
            left: 270px;
            width: 300px;
            height:20px;
            font-size: 16px;
        }
        .information{
            position: absolute;
            bottom: 40px;
            left: 220px;
            width: 100px;
            height:20px;
            font-size: 26px;
            font-weight: 600;
            font-synthesis: style;
            white-space: nowrap;
        }
        .div_bg{
            position: relative;
            width: 1000px;
            height: 360px;
            margin: auto;

        }
        .Title{
            height: 52px;
            display: inline;
            background: #9acfea;
            white-space: nowrap;
        }
        .a_1{
            font-size: 200%;
            color: rgb(102,186,127);
        }
        .navbar{
            background: white;
        }
        /*.div_top{*/
        /*    width: 100%;*/
        /*    height: 52px;*/
        /*    background: rgb(255,255,255);*/
        /*}*/
        div {

        }
        .form_1{
            margin-top: 60px;
        }
        .container{
            margin-left: 245px;
        }
        .a_2{
            color: rgb(133,144,166);
            margin-left: 20px;
            font-size: 120%;
        }
        .a_4{
            color: rgb(133,144,166);
            font-size: 60%;
            font-weight: lighter;
        }
        .head_pic{
            width: 30px;
            height: 30px;
            float: right;
            margin-right: 133px;
            margin-top: 10px;
        }
        .a_search{
            color: rgb(133,144,166);
        }
        .form_search{
            margin-right: 330px;
        }
        .input_search{
            width: 400px;
        }
        .logo{
            height: 30px;
            position: absolute;
            bottom: 6%;
            right: 4%;
            background: #5FB878;
        }
    </style>
</head>
<body>
<div class="Title">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
                    <a class="a_1" href="login.html">森林</a>
                    <a class="a_2" href="#">主页</a>
                    <a class="a_2">会员</a>
                    <a class="a_2" href="#">发现</a>
                    <a class="a_2" href="#">联系我们</a>
                    <img src="https://pic3.zhimg.com/da8e974dc_is.jpg" class="head_pic">

            <form class="navbar-form navbar-right form_search">
                <div class="form-group">
                    <input type="text" class="form-control input_search" placeholder="有哪些值得坚持的好习惯">
                </div>
                <button type="submit" class="btn btn-default"><span class="a_search">搜索</span></button>
            </form>


        </div>
    </nav>
</div>
<form class="form_1">
    <div class="div_bg">

        <div class="div_1">

        </div>

        <div class="div_2">

        </div>
        <div class="con_img">
            <span class="ms"></span>
        </div>
        <div>
            <span class="username"><b>LOG</b></span>
        </div>

        <div>
            <span class="motto"></span>
        </div>

        <div class="information">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <span class="a_4">
                            <span class="caret">
                            </span>
                                查看详细资料
                        </span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</form>
<div>
    <img  class="logo" src = "https://forest-mt-s3.seekrtech.com/assets/images/desktop/forest_logo.svg">
</div>
</body>
</html>